<template>
	<view>
		<com-nav-bar @clickLeft="back" left-icon="back" title="找朋友付"></com-nav-bar>
		
		<view style="padding: 20rpx;background-color: #fff;">
			<view style="display: flex;align-items: center;">
				<view>
					<image v-if="user.avatar_url" :src="user.avatar_url" mode="aspectFill" class="acatar"></image>
					<image v-else src="/static/icon/default-avatar.png" mode="aspectFill" class="acatar"></image>
				</view>
				<view>
					<view>
						<view style="font-size: 12pt;">{{user.nickname}}</view>
						<view style="font-size: 10pt;">{{user.mobile}}</view>
					</view>
				</view>
			</view>
			
			<view style="font-size: 10pt;font-weight: 600;margin-top: 20rpx;">订单商品</view>
			<view style="padding:20rpx;" v-if="detail && detail.length > 0">
				<view v-for="item in detail" style="display: flex;align-items: center;justify-content: space-between;">
					<view style="display: flex;align-items: center;">
						<view class='goods-cover'>
							<image :src="item.cover_pic" mode="aspectFill" class="goods_pic"></image>
						</view>
						<view class="order-goods">
							<view class="name ellipsis">{{item.attr_str}}</view>
							<view class="attr ellipsis">
								x{{item.goods_num}}
							</view>
						</view>
					</view>
					<view class="goods_price">
						<view style="display: flex;align-items: center;">
							<view class="original">￥{{item.original_price}}</view>
							<view style="font-size: 8pt;">￥{{item.unit_price}}</view>
						</view>
						<view class="price" style="color: red;font-weight: 600;">￥{{item.price}}</view>
					</view>
				</view>
			</view>
			
			<view style="font-size: 10pt;font-weight: 600;margin-top: 20rpx;">订单信息</view>
			
			<view class="order-line">
				<view>订单号</view>
				<view>{{orderInfo.order_no}}</view>
			</view>

			<view class="order-line">
				<view>商品总计</view>
				<view>￥{{orderInfo.goods_price}}</view>
			</view>
			
			<view class="order-line">
				<view>运费</view>
				<view>￥{{orderInfo.express_price}}</view>
			</view>
			<view class="order-line">
				<view>抵扣</view>
				<view>￥{{orderInfo.deduct_price}}</view>
			</view>
			
			<view style="font-weight: 600;" class="order-line">
				<view>总计</view>
				<view style="font-size: 12pt;color:red">￥{{orderInfo.pay_price}}</view>
			</view>
		</view>
		
		<view style="padding: 40rpx;">
			<view v-if="!userType" class="default-btn" @tap="confirmPay" :style="{background:'#FF7104'}">完成本次付款</view>	
			
			<view v-if="userType && isWeChat" class="default-btn" @tap="shareFirend" :style="{background:'#FF7104'}">分享到微信</view>
			<view v-if="userType" class="default-btn" @tap="copyLink" :style="{background:'#FF7104'}">复制帮付链接</view>
		</view>
		
		
		
		<view style="padding: 20rpx;font-size: 10pt;">
			<view style="font-weight: 600;margin-top: 20rpx;">帮付说明</view>
			<view style="line-height: 35rpx;padding: 20rpx;">
				1. 本产品正在为您提供帮亲友付款的服务，您应在国家法规政策允许的范围内使用本产品。<br>
				2. 付款前请您务必确认对方身份，以免遇到诈骗行为。<br>
				3. 如果交易发生退款，已支付的金额将原路退回付款人的付款账户。
			</view>
		</view>
		
		
		
	</view>
	
	
</template>

<script>
	import { isWeChat } from '@/utils/util.js';
	
	
	let that;
	export default {
		data(){
			return {
				userType:0,
				order_no:'',
				user:'',
				orderInfo:'',
				detail:'',
				isWeChat:false,	
			}
		},
		beforeCreate() {
			that = this;
		},
		onLoad(opt) {
			this.order_no = opt.order_no ?? '';
			this.userType = opt.type ?? 0;
			if(!this.order_no){
				uni.showToast({icon:'none',title:'订单不存在~'});
				setTimeout(()=>{
					that.navBack();
				},2000)
			}
			this.isWeChat = isWeChat();
			this.getHelpOrderInfo();
		},
		methods:{
			back() {
				this.navBack();
			},
			
			async getHelpOrderInfo(){

				let res = await that.$http.request({
					url: that.$api.v2Order.helpOrderInfo,
					showLoading: true,
					method: 'get',
					data: {order_no:that.order_no}
				});
				if(res.code != 0){
					uni.showToast({icon:'none',title:res.msg});
					setTimeout(()=>{
						that.navBack();
					},2000)
					return ;
				}
				that.user = res.data.user;
				that.orderInfo = res.data.orderInfo;
				that.detail = res.data.detail;
				that.$forceUpdate()
			},
			
			copyLink(){
				let url = window.location.protocol + '//' + window.location.host + window.location.pathname + '#/pages/order/payment/help_pay?order_no=' + this.order_no;
				uni.setClipboardData({
					data: url,
					success: function () {
						uni.showToast({icon:'none',title:'链接复制成功~',duration:3000});
					}
				});
			},
			
			shareFirend(){
				uni.showLoading({title:'请稍后...',mask:true});
				var obj ={
					app_share_desc: this.orderInfo.desc,
					app_share_pic: this.detail[0].goods_attr.pic_url ? this.detail[0].goods_attr.pic_url : this.detail[0].goods_attr.cover_pic,
					app_share_title: '我发起了一笔帮付！'
				};
				let url = window.location.protocol + '//' + window.location.host + window.location.pathname + '#/pages/order/payment/help_pay?order_no=' + this.order_no;
				this.$wechatSdk.initShareUrl(obj,url);
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({icon:'none',title:'请继续点击右上角菜单来完成分享~',duration:3000})
				},1500)
			},
			
			confirmPay(){
				uni.navigateTo({
					url: '/pages/order/payment/preview?order_no='+this.order_no
				})
			}
		}
	}
</script>

<style lang="scss">
	.ellipsis{
		overflow:hidden;
		text-overflow:ellipsis;  
		white-space: normal;  
		display:-webkit-box;
	}
	.acatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 16rpx;
	}
	
	.goods_pic {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		
	}
	.goods-cover{
		width: 80rpx;
		height: 80rpx;
		margin-right: 15rpx;
	}
	.order-goods {
		max-width: 60vw;
	}
	.order-goods .name{
		font-size: 10pt;
	}
	.order-goods .attr{
		color:#888888;
		font-size: 8pt;
	}
	.goods_price{
		max-width: 25vw;
	}
	.goods_price .original{
		color:#888888;
		font-size: 8pt;
		text-decoration-line: line-through; 
	}
	.goods_price .price{
		font-size: 10pt;
	}
	.order-line{
		padding: 20rpx;
		font-size: 10pt;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.default-btn {
		color: #FFFFFF;
		background: #bc0100;
		padding: 26rpx 0;
		text-align: center;
		border-radius: 80rpx;
		font-size: 10pt;
		letter-spacing: 4rpx;
		margin-top: 20rpx;
	}
</style>